import React, { useState, useRef } from "react";
import { View, Text, Button, Alert, ScrollView, ActivityIndicator } from "react-native";
import { TestSuite, TestCase, Tester } from '@rnoh/testerino';
import type {
    VideoComponentType,
} from "react-native-video/src/fabric/VideoNativeComponent";
import RNCVideo, {
  type OnProgressData,
  type ControlsStyles,
} from 'react-native-video';
export default function PropsTextVideo(): JSX.Element {
    const [disableFocus, setDisableFocus] = useState(false)

    return (
        <Tester style={{ flex: 1 }}>
            <ScrollView style={{ flex: 1 }}>
                <TestSuite name="video">
                    <TestCase
                        itShould="poster"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuPosterTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould={`posterResizeMode = {"stretch"}`}
                        initialState={false}
                        arrange={({ setState }) => <AddposterResizeModeTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="source"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuMeasureTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="repeat={true}"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuRepeatFalseTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="resizeMode={'contain'}"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuResizeModeTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="resizeMode={'cover'}"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuResizeModecoverTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="resizeMode={'stretch'}"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuResizeModeStretchTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="seek"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuSeekTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="muted={false}"
                        initialState={false}
                        arrange={({ setState }) => <AddMenuonMutedTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="controls={false}"
                        initialState={false}
                        arrange={({ setState }) => <AdddControlsTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="volume={0.2}"
                        initialState={false}
                        arrange={({ setState }) => <AddVolumeTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="disableFocus = false"
                        initialState={false}
                        arrange={({ setState }) => <AdddisableFocusTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="disableFocus =true"
                        initialState={false}
                        arrange={({ setState }) => <AdddisableFocusTrueTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="paused"
                        initialState={false}
                        arrange={({ setState }) => <AddpausedTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />

                    {/* 属性 */}
                    <TestCase
                        itShould="fullscreen"
                        initialState={false}
                        arrange={({ setState }) => <AddFullscreenTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="rate"
                        initialState={false}
                        arrange={({ setState }) => <AddRateTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="viewtype"
                        initialState={false}
                        arrange={({ setState }) => <AddViewTypeTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="disableDisconnectError"
                        initialState={false}
                        arrange={({ setState }) => <AddDisOnErrorTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="controlsStyles"
                        initialState={false}
                        arrange={({ setState }) => <AddControlstyleTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="startPosition"
                        initialState={false}
                        arrange={({ setState }) => <AddStartPosTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="RenderLoad"
                        initialState={false}
                        arrange={({ setState }) => <AddRenderLoadTest setState={setState} disableFocus={disableFocus} setDisableFocus={setDisableFocus} />}
                        assert={({ state, expect }) => {
                            expect(state).to.be.true;
                        }}
                    />
                </TestSuite>
            </ScrollView>
        </Tester>

    );
}

const AddRenderLoadTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [isLoading, setIsLoading] = useState(true);
    const [show, setShow] = useState(false)
    const renderCustomLoader = () => {
        if (!isLoading) return null;

        return (
        <View style={{
        }}>
            <ActivityIndicator size="large" color="#ff" />
            <Text style={{ color: '#ff0000', textAlign: 'center', marginTop: 30 }}>耐心等待一下下...</Text>
        </View>
        );
    };
    const addshow = () => {
        setShow(!show)
    }

    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                <Text>界面RenderLoad测试</Text>
                {
                    show ? <RNCVideo
                        ref={videoref}
                        source={{uri: 'https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4'}}
                        renderLoader={renderCustomLoader}
                        resizeMode="contain"
                        onLoadStart={() => setIsLoading(true)} // 视频开始加载时
                        onLoad={() => setIsLoading(false)}     // 视频加载完成时
                        onBuffer={({ isBuffering }) => setIsLoading(isBuffering)} // 缓冲状态变化时
                        onError={() => setIsLoading(false)}    // 出错时也停止加载
                        style={{ flex: 1 }}
                    /> : null
                }
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>
    );
}

const AddStartPosTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [show, setShow] = useState(false)
    const [startPos, setStartPos] = useState(0)

    const addshow = () => {
        setShow(!show)
    }
    
    // 修复按钮事件处理函数，避免直接调用setState函数
    const setStartPosTo10 = () => {
        setStartPos(10000);
    }
    
    const setStartPosTo20 = () => {
        setStartPos(20000);
    }

    return (
        <View style={{
            height: 320,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                <Text>startPosition测试</Text>
                {
                    show ? <RNCVideo
                        ref={videoref}
                        source={{ 
                            uri: require("../../../assets/34.mp4"),
                            startPosition: startPos
                        }}
                        repeat={false}
                        controls={true}
                        paused={false}
                        muted={false}
                        resizeMode={"stretch"}
                        style={{ flex: 1 }}
                    /> : null
                }
            </View>
            <View style={{ marginTop: 20, flexDirection: "column" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"设置10秒startPos"} onPress={setStartPosTo10} />
                <Button title={"设置20秒startPos"} onPress={setStartPosTo20} />
            </View>
        </View>
    );
}

const AddControlstyleTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [controlsStyles, setControlsStyles] = useState({
      hidePlayPause: false,
      hideSeekBar: true,
      hideDuration: false,
      hidePosition:true
    });

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                <Text>界面隐藏测试</Text>
                {
                    show ? <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4" }}
                        repeat={false}
                        controls={true}
                        paused={false}
                        controlsStyles={controlsStyles}
                        muted={false}
                        resizeMode={"stretch"}
                        style={{ flex: 1 }}
                    /> : null
                }
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"切换setStyles"} onPress={()=>{
                    if (!controlsStyles.hidePlayPause)
                        setControlsStyles({hidePlayPause:true,hideSeekBar:true,
                            hideDuration:true,hidePosition:true})
                    else
                        setControlsStyles({hidePlayPause:false,hideSeekBar:false,
                            hideDuration:false,hidePosition:false})
                }} />

            </View>
        </View>
    );
}

const AddDisOnErrorTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)
    const [error, setError] = useState("")
    const [disable, setDisable] = useState(false)

    const addRepeat = () => {
        setPaused(!paused)
    }
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (
        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',
            }}>
                <Text>断网测试Error{error}</Text>
                {
                    show ? <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={false}
                        paused={false}
                        muted={false}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        disableDisconnectError={disable} // <-- 关键属性：禁用网络断开错误
                        onError={(err: OnVideoErrorData) => {
                            console.log(JSON.stringify(err));
                            setError(JSON.stringify(err))
                            props.setState(true);
                        }}
                        style={{ flex: 1 }}
                    /> : null
                }
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"disableError"} onPress={()=>{
                    setDisable(!disable)
                    setError("")
                }} />

            </View>
        </View>
    );
}

const AddpausedTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)

    const addRepeat = () => {
        setPaused(!paused)
    }
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }


    return (

        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                        repeat={false}
                        paused={paused}
                        muted={false}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                    />
                    : null}


            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={paused ? "播放" : "暂停"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AdddisableFocusTrueTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)

    const addRepeat = () => {
        setPaused(!paused)
    }


    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (

        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        disableFocus={true}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4" }}
                        repeat={false}
                        paused={paused}
                        muted={false}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                    />
                    : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={paused ? "播放" : "暂停"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AdddisableFocusTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)

    const addRepeat = () => {
        setPaused(!paused)
    }
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (

        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        disableFocus={false}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4" }}
                        repeat={false}
                        paused={paused}
                        muted={false}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                    />
                    : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={paused ? "播放" : "暂停"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AdddControlsTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [controls, setControls] = useState(false)

    const addControls = () => {
        setControls(!controls)
    }
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (

        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        disableFocus={false}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4"}}
                        controls={controls}
                        repeat={false}
                        paused={false}
                        muted={false}
                        resizeMode={"stretch"}
                        style={{ flex: 1 }}
                    />
                    : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={controls ? "隐藏" : "显示"} onPress={addControls} />
            </View>
        </View>

    );

}

const AddVolumeTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {

    const { disableFocus, setDisableFocus } = props
    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(true)
    const [volume, setVolume] = useState(1)
    const addRepeat = () => {
        setPaused(!paused)
    }
    const addVolume = () => {
        setVolume(0.2)
    }

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (

        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ? <RNCVideo
                    ref={videoref}
                    source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4"}}
                    repeat={false}
                    disableFocus={disableFocus}
                    paused={paused}
                    muted={false}
                    resizeMode={"contain"}
                    style={{ flex: 1 }}
                    volume={volume}
                /> : null}


            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={paused ? "播放" : "暂停"} onPress={addRepeat} />

                <Button title={"音量调整为0.2"} onPress={addVolume} />
            </View>
        </View>

    );

}

const AddMenuonMutedTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [paused, setPaused] = useState(false)

    const [muted, setMuted] = useState(false)
    const addRepeat = () => {
        setMuted(!muted)
    }
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (

        <View style={{
            height: 220,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <View style={{
                height: 150,
                width: 200,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ? <RNCVideo
                    ref={videoref}
                    source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4"}}                    
                    repeat={true}
                    paused={paused}
                    disableFocus={disableFocus}
                    muted={muted}
                    resizeMode={"contain"}
                    style={{ flex: 1 }}
                /> : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={muted ? "不静音" : "静音"} onPress={addRepeat} />

            </View>

        </View>

    );

}

const AddMenuSeekTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);
    const [timeDuration, setTimeDuration] = useState({
        currentTime: 0,
        playableDuration: 0,
        seekableDuration: 0
    })

    const addRepeat = () => {
        videoref?.current?.seek(1)
    }

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    return (

        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"

        }}>
            <Text>currentTime:{timeDuration?.currentTime},playableDuration:{timeDuration?.playableDuration},seekableDuration:{timeDuration?.seekableDuration}</Text>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        onProgress={(currentTime) => {
                            setTimeDuration(currentTime)
                        }}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"设置seek"} onPress={addRepeat} />
            </View>
        </View>
    );
}

const AddposterResizeModeTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props
    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }
    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {
                    show ? <RNCVideo
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                        repeat={true}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        disableFocus={disableFocus}
                        poster={"https://res.vmallres.com/pimages/uomcdn/CN/pms/202304/sbom/4002010007801/group/800_800_9B1356F1330EADDCB20D35D2AE1F46E0.jpg"}
                        posterResizeMode="stretch"
                    /> : null
                }

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AddMenuPosterTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>,
    disableFocus: boolean,
}) => {
    const { disableFocus, setDisableFocus } = props
    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }
    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {
                    show ?
                        <RNCVideo
                            source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                            repeat={true}
                            disableFocus={disableFocus}
                            resizeMode={"contain"}
                            style={{ flex: 1 }}
                            poster={"https://res.vmallres.com/pimages/uomcdn/CN/pms/202304/sbom/4002010007801/group/800_800_9B1356F1330EADDCB20D35D2AE1F46E0.jpg"}
                        />
                        : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AddMenuResizeModeStretchTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>,
    disableFocus: boolean,
}) => {
    const { disableFocus, setDisableFocus } = props

    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }
    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {
                    show ?
                        <RNCVideo
                            source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                            repeat={true}
                            disableFocus={disableFocus}
                            resizeMode={"stretch"}
                            style={{ flex: 1 }}
                        />
                        : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AddMenuResizeModecoverTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>,
    disableFocus: boolean,
}) => {
    const { disableFocus, setDisableFocus } = props
    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }

    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {
                    show ?
                        <RNCVideo
                            source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                            repeat={true}
                            disableFocus={disableFocus}
                            resizeMode={"cover"}
                            style={{ flex: 1 }}
                        />
                        : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addRepeat} />
            </View>
        </View>

    );

}

const AddMenuResizeModeTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>,
    disableFocus: boolean,
}) => {
    const { disableFocus, setDisableFocus } = props
    const [show, setShow] = useState(false)
    const addRepeat = () => {
        setShow(!show)
    }

    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>

            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {
                    show ?
                        <RNCVideo
                            disableFocus={disableFocus}
                            source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                            repeat={true}
                            resizeMode={"contain"}
                            style={{ flex: 1 }}
                        />
                        : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addRepeat} />
            </View>
        </View>


    );

}

const AddMenuRepeatFalseTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>,
    disableFocus: boolean,
}) => {
    const { disableFocus, setDisableFocus } = props

    const [repeat, setRepeat] = useState<boolean>(true)
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const addRepeat = () => {
        setRepeat(!repeat)
    }

    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',

            }}>
                {show ? <RNCVideo
                    disableFocus={disableFocus}
                    source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                    repeat={repeat}
                    resizeMode={'contain'}
                    style={{ flex: 1 }}
                /> : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addshow} />
                <Button title={"重复播放切换"} onPress={addRepeat} />
            </View>

        </View>

    );

}

const AddMenuMeasureTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>,
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>,
    disableFocus: boolean,
}) => {
    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const { disableFocus, setDisableFocus } = props
    const [measureText, setMeasureText] = useState<{
        width: number,
        height: number,
    }>({
        width: 0,
        height: 0,
    })

    return (
        <View style={{
            width: "100%",
            height: 220,
            justifyContent: "center",
            alignItems: "center"
        }}>

            <View style={{
                height: 150,
                width: "100%",
                overflow: 'hidden',
                justifyContent: 'center',
            }}>

                {show ? <RNCVideo
                    source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}

                    disableFocus={disableFocus}
                    repeat={false}
                    resizeMode={'contain'}
                    style={{ flex: 1 }}
                /> : null}

            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>

                <Button title={"展示video"} onPress={addshow} />
            </View>
        </View>

    );

}

// 新增测试用例——属性
const AddFullscreenTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }

    const [fullscreen, setFullscreen] = useState(false)
    const addRepeat = () => {
        setFullscreen(!fullscreen)
    }
    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>

            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://971-cn-north-4.cdn-vod.huaweicloud.com/asset/c726f001f9b6c33483dc694002fd5759/09dff810b88651acd29c49cbcec21079.mp4" }}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        fullscreen={fullscreen}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"全屏"} onPress={addRepeat} />
            </View>
        </View>
    );
}

const AddRateTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const [rate, setViewType] = useState(0)
    const addRepeat = () => {
        setViewType(0.3)
    }

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>

            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4" }}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        rate={rate}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"rate:0.3"} onPress={addRepeat} />
            </View>
        </View>
    );
}
const AddViewTypeTest = (props: {
    setState: React.Dispatch<React.SetStateAction<boolean>>;
    setDisableFocus: React.Dispatch<React.SetStateAction<boolean>>;
    disableFocus: boolean;
}) => {
    const { disableFocus, setDisableFocus } = props

    const videoref = useRef<React.ElementRef<VideoComponentType>>(null);

    const [show, setShow] = useState(false)
    const addshow = () => {
        setShow(!show)
    }
    const [viewType, setViewType] = useState(0)
    
    const switchViewType = () => {
        setViewType(viewType === 0 ? 1 : 0)
        if(show) {
        setShow(false)
        setTimeout(() => {
            setShow(true)
        }, 1000);
        }
    }

    return (
        <View style={{
            height: 250,
            width: "100%",
            overflow: 'hidden',
            alignItems: "center"
        }}>
            <Text>switchViewType:{viewType}</Text>
            <View style={{
                height: 150,
                width: 150,
                overflow: 'hidden',
                justifyContent: 'center',

            }}>
                {show ?
                    <RNCVideo
                        ref={videoref}
                        source={{ uri: "https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4" }}
                        repeat={true}
                        disableFocus={disableFocus}
                        resizeMode={"contain"}
                        style={{ flex: 1 }}
                        viewType={viewType}
                    />
                    : null}
            </View>
            <View style={{ marginTop: 20, flexDirection: "row" }}>
                <Button title={"展示video"} onPress={addshow} />
                <Button title={"切换ViewType"} onPress={switchViewType} />
            </View>
        </View>
    );
}